import React, { Component } from 'react';
import Swiper from './Swiper'
import NavList from './NavList'
import ProList from './ProList'
import { connect } from 'react-redux'


// @connect(
//   (state) => {
//     return {
//       bannerList: state.getIn(['home', 'bannerList']),
//       navList: state.getIn(['home', 'navList']),
//       ProList: state.getIn(['home', 'ProList'])
//     }
//   },
//   (dispatch) => {
//     return {
//       getBannerList() {
//         dispatch({ type: 'GET_HOME_BANNER_LIST' })
//       },
//       getProList() {
//         dispatch({ type: 'GET_HOME_PRO_LIST' })
//       }
//     }
//   }
// )


class Index extends Component {
  componentDidMount () {
    this.props.getBannerList()
    this.props.getProList()
  }
  render() {
    const { bannerList, navList, proList } = this.props
    return (
      <div className="box">
        <header className="header">home</header>
        <div className="content">
          <Swiper bannerList={ bannerList } />
          <NavList navList={ navList } />
          <ProList proList={ proList } />
        </div>
      </div>
    );
  }
}


export default connect(
  (state) => {
    return {
      bannerList: state.getIn(['home', 'bannerList']),
      navList: state.getIn(['home', 'navList']),
      proList: state.getIn(['home', 'proList'])
    }
  },
  (dispatch) => {
    return {
      getBannerList() {
        dispatch({ type: 'GET_HOME_BANNER_LIST' })
      },
      getProList() {
        dispatch({ type: 'GET_HOME_PRO_LIST' })
      }
    }
  }
)(Index)